import React, { Component } from 'react'
import { FormattedMessage} from 'react-intl'
import { Icon, Result } from 'antd-mobile'
import { SideLeftRight } from 'component/common'
import { helper } from '../utils'

export default class SearchResult extends Component {
  render() {
    const { data, onClick } = this.props
    return (
      <div className="rt-result-choice">
        <h3 className="rt-h3">
          <FormattedMessage
            id="result"
          />
        </h3>
        {
          data.length <= 0 ?
          <Result
            imgUrl="https://os.alipayobjects.com/rmsportal/MKXqtwNOLFmYmrY.png"
            message="没有搜到匹配结果"
          /> :
          data.map((val,index) => {
            return (
              <SideLeftRight
                 key={val.id}
                  left={
                    <span>
                      <FormattedMessage id={helper.splitString(val.ccyPair)[0]}/>
                      <span>/</span>
                      <FormattedMessage id={helper.splitString(val.ccyPair)[1]}/>
                    </span>
                  }
                  right={
                     <span className="rt-hot-plus">
                      <Icon type={require('static/svg/icon_53.svg')}/>
                    </span>
                  }
                  onClick={
                    () => {
                      onClick(val)
                    }
                  }
                />
            )
          })
        }
      </div>
      )
  }
}